@import "tailwindcss";
@config "./tailwind.config.js";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%;
        --radius: 0.5rem;
    }
    :root.dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
    }

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: hsl(var(--border));
    }
}

@theme {
    --default-ring-color: hsl(var(--ring));
}

@layer base {
    /*custom*/
    [data-collapsed] [data-collapse=hidden] {
        display: none
    }
    [data-collapse-off=opacity-100] {
        opacity: 1
    }
    [data-collapsed] [data-collapse=opacity-0] {
        opacity: 0
    }
    [data-collapse-off=-translate-x-full] {
        transform: translateX(0)
    }
    [data-collapsed] [data-collapse=-translate-x-full] {
        transform: translateX(-100%)
    }
    @media (min-width: 640px) {
        .youtube {
            width: 761px;
            height: 428px;
        }
    }

    /*vue*/
    [v-cloak] {display:none}

    /* override element defaults */
    b, strong { font-weight:600; }
    ::-webkit-scrollbar{width:8px;height:8px}
    ::-webkit-scrollbar-thumb{background-color:#ccc}
    [role=dialog].z-10 {
        z-index: 60;
    }
    em {
        color: #3b82f6;
        font-weight: 400;
        background-color: #eff6ff;
        border-radius: 0.25rem;
        padding: 0.125em 0.5rem;
        margin-left: 0.125em;
        margin-right: 0.125em;
        font-style: normal;
    }

    /* @tailwindcss/forms css */
    [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='week'],[type='search'],[type='tel'],[type='time'],[type='color'],[multiple],textarea,select
    {-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-width:1px;padding:0.5rem 0.75rem;font-size:1rem}
    [type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='week']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='color']:focus,[multiple]:focus,textarea:focus,select:focus{
        outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
        --tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
        --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb;}
    input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}
    input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}
    input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
    select{
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}
    [multiple]{
        background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;}
    [type='checkbox'],[type='radio']{
        -webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;
        vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
        flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-width:1px}
    [type='radio']{border-radius:100%}
    [type='checkbox']:focus,[type='radio']:focus{
        outline:2px solid transparent;outline-offset:2px;
        --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
        --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
    [type='checkbox']:checked,[type='radio']:checked{
        border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
    [type='checkbox']:checked{
        background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
    [type='radio']:checked{
        background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}
    [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
        border-color:transparent;background-color:currentColor}
    [type='checkbox']:indeterminate{
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
        border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
    [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}
    [type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
    [type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
    [type='color']{height:2.4rem;padding:2px 3px}
    [type='range']{height:2.4rem}

    @media (min-width: 640px) {
        [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='week'],[type='search'],[type='tel'],[type='time'],[type='color'],[multiple],textarea,select {
            font-size: .875rem;
            line-height: 1.25rem;
        }
    }

    /* dark mode autocomplete fields */
    .dark input:-webkit-autofill,
    .dark input:-webkit-autofill:hover,
    .dark input:-webkit-autofill:focus,
    .dark input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-text-fill-color: #ffffff;
    }
    .dark input[data-autocompleted] {
        background-color: transparent !important;
    }

    /* @tailwindcss/aspect css */
    .aspect-h-9 {
        --tw-aspect-h: 9;
    }
    .aspect-w-16 {
        position: relative;
        padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
        --tw-aspect-w: 16;
    }
    .aspect-w-16 > * {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

.animate-spin {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.dark {
    color-scheme: dark;
}
.lang:before {
    content: "$ ";
}

.notes a {
    color: rgb(30 64 175);
}
.dark .notes {
    color: rgb(156 163 175);
}
.dark .notes a {
    color: rgb(63 131 248);
}

.svg-external {
    background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%231E40AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
    padding-right: 1.35rem;
}
.dark .svg-external {
    background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%233f83f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
}

div.example-code {
    margin: 28px 0;
    border-radius: 8px;
}
.dark p code {
    background-color: rgb(30 58 138); /*text-blue-900*/
    color: rgb(243 244 246); /*text-gray-100*/
}
p code {
    color: #3b82f6;
    background-color: #eff6ff;
    padding: 0.25em 0.5rem;
    border-radius: 0.25rem;
}

.example ::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
.example ::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
